// 文件内使用到_variables.scss里的变量，需要将其进行导入
@use '../../styles/variables' as *;
@use '../../styles/minin' as *;
@use 'sass:color';
$alert-colors: 
(
  "primary":    $primary,
  "success":    $success,
  "warning":    $warning,
  "danger":     $danger,
  "info":       $info,
);
.leo-alert {
    // position: absolute;
    // top: 50px;
    // left: 50%;
    width: 400px;
    margin: 10px auto;
    padding: $alert-padding-y $alert-padding-x;
    box-sizing: border-box;
    border: $alert-border-width solid transparent;
    border-radius: $alert-border-radius;
    // @include alert-style(color.scale($primary,$alpha: -85%),$primary,$gray-800);
    .alert_tit {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: $font-size-base;
        .alert_icon {
            font-size: $font-size-base;
            margin-right: 8px;
            margin-top: 5px;
        }
        .closable {
            cursor: pointer;
            font-weight: normal;
            font-size: $font-size-sm;
            color: $alert-close-color;
            &:hover {
                color: $alert-close-hover-color;
            }
        }
    }
    .alert_tit_and_text {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: $font-size-base;
        margin-bottom: 10px;
        .alert_icon {
            font-size: $font-size-lg*1.2;
            margin-right: 8px;
            margin-top: 5px;
        }
        .closable {
            cursor: pointer;
            font-weight: normal;
            font-size: $font-size-lg;
            color: $alert-close-color;
            &:hover {
                color: $alert-close-hover-color;
            }
        }
    }
    .alert_tit_center {
        display: flex;
        align-items: center;
    }
    
    
    .description {
        font-size: $font-size-sm;
    }
}

// .leo-alert-primary {
//     @include alert-style(color.scale($primary,$alpha: -85%),$primary,$gray-800)
// }
// .leo-alert-success {
//     @include alert-style(color.scale($success,$alpha: -85%),$success,$gray-800)
// }
// .leo-alert-warning {
//     @include alert-style(color.scale($warning,$alpha: -85%),$warning,$gray-800)
// }
// .leo-alert-danger {
//     @include alert-style(color.scale($danger,$alpha: -85%),$danger,$gray-800)
// }
// .leo-alert-info {
//     @include alert-style(color.scale($gray-600,$alpha: -85%),$gray-600,$gray-800)
// }
@each $key,$value in $alert-colors {
    .leo-alert-#{$key} {
        @include alert-style(color.scale($value,$alpha: -88%,$lightness: 30%),color.scale($value,$alpha: -30%,$lightness: 30%),$gray-800)
    }
} 